<extend name="admin/main"/>

<block name="title">
    <title>权限管理</title>
</block>

<block name="css">
</block>

<block name="heading">权限管理</block>

<block name="content">
    <div class="row" data-widget-group="group">
        <div class="col-md-12">
            <div class="panel panel-default" data-widget='{"id" : "roles"}' style="visibility: visible">
                <div class="panel-heading">
                    <div class="panel-ctrls button-icon"
                         data-actions-container=""
                         data-action-collapse='{"target": ".panel-body"}'
                         data-action-expand=''
                         data-action-colorpicker=''
                         data-action-refresh=''
                         data-action-close=''
                    >
                    </div>
                    <h2>Roles</h2>
                </div>
                <div class="panel-editbox" data-widget-controls=""></div>
                <div class="panel-body">
                    <table class="table m-n table-hover table-bordered text-center">
                        <thead>
                        <tr class="text-uppercase">
                            <th class="text-center">#</th>
                            <th class="text-center">name</th>
                            <th class="text-center">display name</th>
                            <th class="text-center">description</th>
                            <th class="text-center">flag</th>
                            <th class="text-center">created_at</th>
                            <th class="text-center">created_at</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <foreach name="roles" item="role">
                            <tr>
                                <td>{$role.id}</td>
                                <td>{$role.name}</td>
                                <td>{$role.display_name}</td>
                                <td>{$role.description}</td>
                                <td>{$role.flag}</td>
                                <td>{$role.created_at}</td>
                                <td>{$role.created_at}</td>
                                <td>
                                    <div class="btn-group">
                                        <button class="btn-sm btn btn-info-alt edit-role" data-id="{$role.id}"><i
                                                class="fa fa-edit"></i></button>
                                        <button class="btn-sm btn btn-danger-alt delete-role" data-id="{$role.id}"><i
                                                class="fa fa-trash"></i></button>
                                    </div>
                                </td>
                            </tr>
                        </foreach>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="8" class="text-left">
                                <button class="btn btn-success-alt" id="add_roles" data-toggle="modal" href="#add_role">
                                    <i class="fa fa-upload"> 添加</i>
                                </button>
                                <div class="modal fade" id="add_role" tabindex="-1" role="dialog" aria-hidden="true">
                                    <form class="modal-dialog" method="POST" action="/admin/AdminUser/addRole">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true">×
                                                </button>
                                                <h2 class="modal-title">添加角色</h2>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label class="control-label">Name</label>
                                                    <input type="text" class="form-control" name="name"
                                                           placeholder="角色名称" required>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label">Display Name</label>
                                                    <input type="text" class="form-control" name="display_name"
                                                           placeholder="显示名称" required>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label">Description</label>
                                                    <input type="text" class="form-control" name="description"
                                                           placeholder="描述" required>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label">Flag</label>
                                                    <input type="number" class="form-control" name="flag"
                                                           placeholder="标志 2-99" required>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label"
                                                           style="display: block;">Permissions</label>
                                                    <foreach name="permissions" item="permission">
                                                        <label style="padding: 5px">
                                                            <input type="checkbox" name="permissions[]"
                                                                   value="{$permission.id}"> {$permission.display_name}
                                                        </label>
                                                    </foreach>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                                <button type="submit" class="btn btn-primary">提交</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row" data-widget-group="group">
        <div class="col-md-12">
            <div class="panel panel-default" data-widget='{"id" : "permissions"}' style="visibility: visible">
                <div class="panel-heading">
                    <div class="panel-ctrls button-icon"
                         data-actions-container=""
                         data-action-collapse='{"target": ".panel-body"}'
                         data-action-expand=''
                         data-action-colorpicker=''
                         data-action-refresh=''
                         data-action-close=''
                    >
                    </div>
                    <h2>Permissions</h2>
                </div>
                <div class="panel-editbox" data-widget-controls=""></div>
                <div class="panel-body">
                    <table class="table m-n table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>name</th>
                            <th>display name</th>
                            <th>description</th>
                            <th>created_at</th>
                            <th>created_at</th>
                        </tr>
                        </thead>
                        <tbody id="permission_table_body">
                        <foreach name="permissions" item="permission">
                            <tr data-id="{$permission.id}">
                                <td>{$permission.id}</td>
                                <td>{$permission.name}</td>
                                <td><input type="text" class="form-control" name="display_name"
                                           value="{$permission.display_name}" data-origin="{$permission.display_name}">
                                </td>
                                <td>
                                    <input type="text" class="form-control" name="description"
                                           value="{$permission.description}" data-origin="{$permission.description}">
                                </td>
                                <td>{$permission.created_at}</td>
                                <td>{$permission.created_at}</td>
                            </tr>
                        </foreach>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="7">
                                <button class="btn btn-success-alt" data-toggle="modal"
                                        data-target="#add_permission">
                                    <i class="fa fa-upload"></i> 添加
                                </button>
                                <div class="modal fade" id="add_permission" tabindex="-1" role="dialog"
                                     aria-hidden="true">
                                    <form class="modal-dialog" method="post" action="/admin/adminUser/insertPermission">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true">&times;
                                                </button>
                                                <h4 class="modal-title">创建许可</h4>
                                            </div>
                                            <div class="modal-body">
                                                <div class="form-group">
                                                    <label>name</label>
                                                    <input type="text" class="form-control" name="name" required>
                                                </div>
                                                <div class="form-group">
                                                    <label>display name</label>
                                                    <input type="text" class="form-control" name="display_name"
                                                           required>
                                                </div>
                                                <div class="form-group">
                                                    <label>description</label>
                                                    <input type="text" class="form-control" name="description" required>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                                <button type="submit" class="btn btn-primary">提交更改</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="edit-role" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <form class="modal-content" id="form-edit-role" action="/admin/AdminUser/updateRole" method="post">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改</h4>
                </div>
                <div class="modal-body">
                    <input class="hidden" type="hidden" name="id" id="role_id">
                    <div class="form-group">
                        <label for="role_name">Name</label>
                        <input type="text" class="form-control" readonly disabled id="role_name">
                    </div>
                    <div class="form-group">
                        <label for="role_display_name">display name</label>
                        <input type="text" class="form-control" id="role_display_name" name="display_name" required>
                    </div>
                    <div class="form-group">
                        <label for="role_description">description</label>
                        <input type="text" class="form-control" id="role_description" name="description" required>
                    </div>
                    <div class="form-group">
                        <label for="role_flag">Flag</label>
                        <input type="number" class="form-control" id="role_flag" name="flag" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label"
                               style="display: block;">Permissions</label>
                        <foreach name="permissions" item="permission">
                            <label style="padding: 5px">
                                <input type="checkbox" name="permissions[]" id="permissions_{$permission.id}"
                                       value="{$permission.id}"> {$permission.display_name}
                            </label>
                        </foreach>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="submitEditFormRole();">提交更改</button>
                </div>
            </form>
        </div>
    </div>
</block>

<block name="js">
    <script type="text/javascript" src="__PUBLIC__/assets/demo/demo.js"></script>
    <script type="text/javascript" src="__PUBLIC__/assets/demo/demo-switcher.js"></script>
    <script type="text/javascript" src="__PUBLIC__/assets/plugins/bootbox/bootbox.js"></script>

    <script>
        $(document).ready(function (e) {
            $('.delete-role').click(function () {
                var $this = $(this);
                bootbox.confirm('是否删除?', function (res) {
                    if (res === false) return;
                    $.post('/admin/AdminUser/deleteRole', {id: $this.attr('data-id')}, function (res) {
                        var json = JSON.parse(res);
                        if (json.success === false) {
                            new PNotify({
                                title: 'Oh On!',
                                text: JSON.stringify(json.data),
                                type: 'error',
                                icon: 'ti ti-info-alt',
                                styling: 'fontawesome'
                            });
                        } else {
                            new PNotify({
                                title: 'Oh On!',
                                text: json.data,
                                type: 'success',
                                icon: 'ti ti-check',
                                styling: 'fontawesome'
                            });
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000);
                        }
                    });
                });
            });
            $('.edit-role').click(function () {
                var id = $(this).attr('data-id');
                $.get('/admin/AdminUser/getRole?id=' + id, function (res) {
                    var data = JSON.parse(res);
                    if (data.success === false) {
                        new PNotify({
                            title: 'Oh On!',
                            text: data.data,
                            type: 'error',
                            icon: 'ti ti-info-alt',
                            styling: 'fontawesome'
                        });
                    } else {
                        data = data.data;
                        $('#role_id').val(data.id);
                        $('#role_name').val(data.name);
                        $('#role_display_name').val(data.display_name);
                        $('#role_description').val(data.description);
                        $('#role_flag').val(data.flag);
                        $('#edit-role').modal('show');
                        $('input[id*="permissions_"]').prop('checked', false);
                        $.each(data.permissions, function (key, value) {
                            $('#permissions_' + value.id).prop('checked', true);
                        });
                    }
                });
            });
            $('#form-edit-role').submit(function () {
                $('#edit-role').modal('hide');
            });
            $('#permission_table_body').delegate('input', 'blur', function (e) {
                var em = $(this);
                var id = em.parents('tr').attr('data-id');
                var key = em.attr('name');
                var value = em.val();
                var origin = em.attr('data-origin');
                if (value === origin) {
                    return;
                }
                var data = {
                    id: id
                };
                data[key] = value;
                $.post('/admin/adminUser/updatePermission', data, function (res) {
                    var data = JSON.parse(res);
                    if (data.success === false) {
                        new PNotify({
                            title: 'Oh On!',
                            text: JSON.stringify(data.data),
                            type: 'error',
                            icon: 'ti ti-info-alt',
                            styling: 'fontawesome'
                        });
                    } else {
                        em.attr('data-origin', value);
                        new PNotify({
                            title: 'Success',
                            text: data.data,
                            type: 'success',
                            icon: 'ti ti-check',
                            styling: 'fontawesome'
                        });
                    }
                });
            });
        });

        function submitEditFormRole() {
            $('#form-edit-role').submit();
        }
    </script>
</block>
